<script setup lang='ts'>
import { getFollowUserList } from '@/api/message';
import { UserType } from '@/models/user';
import { Ref, ref } from 'vue';
import UserCartList from '@/components/UserCartList.vue';


// 获取粉丝列表
const followList:Ref<UserType[]> = ref([])
const currentPage = ref(0)
const getFansList = async () => {
  const res = await getFollowUserList(currentPage.value)
  if(res.data.code === 0){
    if(res.data.data.records.length > 0){
      res.data.data.records.forEach((user: { tags: string; }) => {
        if (user.tags) {
            user.tags = JSON.parse(user.tags);
        }
      })
      followList.value.push(...res.data.data.records)
      load.value = false
    }else {
      finished.value = true
    }
  }
}
// 列表下滑加载更多
const finished = ref(false)
const load = ref(false)
const onLoad = async () => {
    currentPage.value++
    await getFansList()
}
// 下拉刷新
const loading = ref(false)
const onRefresh = () => {
  setTimeout(async () => {
    loading.value = false;
    currentPage.value = 1
    followList.value = []
    await getFansList()
  }, 1000);
}
</script>
<template>
  <van-sticky>
    <van-nav-bar
      title="粉丝"
      left-arrow
      @click-left="$router.back()"
    >
    </van-nav-bar>
  </van-sticky>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <van-list
      v-model:loading="load"
      :finished="finished"
      @load="onLoad"
    >
      <template #finished>
        <span v-if="followList && followList.length!==0">没有更多了</span>
      </template>
      <UserCartList v-if="followList.length>0" :user-list="followList"></UserCartList>
    </van-list>
    <van-empty
      v-if="followList.length===0"
      style="margin-top: 100px;"
      image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
      image-size="80"
      description="暂无其他粉丝"
    />
  </van-pull-refresh>
</template>
<style scoped >
.title{
  margin-left: 10px;
}
.team_img{
  height: 50px;
  width: 50px;
}
</style>
